<template>
  <div class="filter-container">
    <Category
      title="营销图库"
      placeholder="请输入营销图库名称"
      :filterOptions="filterOptions"
      @updateSelected="updateSelected"
      @onSearch="seacrh"
    />
    <ThumbnailList
      :tableConfig="tableConfig"
      @editItem="edit"
      @sortBy="sortBy"
      @sortList="handleSortChange"
      @currentChange="currentChange"
      @downItem="downItem"
      @sizeChange="sizeChange"
    />
    <!-- 营销图编辑弹窗 -->
    <MarketDialog
      v-model:dialogVisible="dialogVisible"
      :form="form"
      v-if="dialogVisible"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
// 顶部筛选组件
import Category from '@/components/Category/index.vue';
// 底部缩略图+列表组件
import ThumbnailList from '@/views/serviceCenter/components/thumbnail/index.vue';
// 编辑弹窗组件
import MarketDialog from './components/marketDialog.vue';
// 判断是否为对象格式返回[]string
import { convertObjectToArray, downloadImage } from '@/utils';
// 接口api
import {
  getCategoryList,
  getMarketingList,
  getMarketingInfo,
  addDownloadNum,
} from '@/api/serviceCenter';
// 弹窗变量控制显示隐藏
const dialogVisible = ref(false);
// 弹窗表单
const form = reactive({
  // 显示设置默认选中
  show_id: ['2', '3'],
});
// 表格数据
const tableConfig = reactive({
  // 总数据量
  total: 0,
  // 当前页码
  page: 1,
  // 每页显示的数据条数
  pageSize: 30,
  // 搜索值
  search: '',
  // 搜索排序类型 1.desc 2.asc
  sortType: '',
  sort: '',
  // 筛选分类id
  search_id: [],
  // 表格数据
  list: [],
  // 表格表头
  columns: [
    {
      label: '封面',
      prop: 'cover_img',
      type: 'image',
      width: '218',
    },
    {
      label: '营销图名称',
      prop: 'name',
      width: '206',
      type: 'name',
    },
    {
      label: '所属分类',
      prop: 'className',
      width: '270',
    },
    {
      label: '文件大小',
      prop: 'fileSize',
      sortable: true,
      width: '150',
    },
    {
      label: '热度',
      prop: 'sort',
      sortable: true,
      width: '150',
    },
    {
      label: '上架时间',
      prop: 'create_time',
      sortable: true,
      width: '200',
    },
    {
      label: '操作',
      type: 'actions',
      fixed: 'right',
      width: '140',
      actions: [
        { type: 'edit', label: '编辑' },
        { type: 'down', label: '下载', pageType: 'marketing' },
      ],
    },
  ],
});
// 筛选分类数据
const filterOptions = ref([]);
// 顶部筛选id传给后端选中的id进行筛选
const updateSelected = (ids) => {
  tableConfig.page = 1;
  tableConfig.search_id = ids;
  tableList();
};
// 排序函数
const sortBy = (val) => {
  tableConfig.sortType = val === 'desc' ? '1' : val === 'asc' ? '2' : '';
  tableConfig.sort = val;
  tableConfig.page = 1;
  tableList();
};
// 定义排序优先级映射
const sortPriorityMap = {
  sort: 1, // 热度排序优先级 1
  create_time: 2, // 时间排序优先级 2
  fileSize: 3, // 文件大小排序优先级 3
};
// 封装函数，根据字段名称获取排序优先级
const getSortPriority = (prop) => {
  return sortPriorityMap[prop] || 1; // 默认优先级为 999（最小优先级）
};

// 列表服务端排序
const handleSortChange = ({ prop, order }) => {
  const sortOrder = order === 'ascending' ? 'asc' : 'desc';
  // 更新排序字段和顺序
  tableConfig.sort = sortOrder;
  tableConfig.sortType = getSortPriority(prop);
  // 调用方法向服务器请求排序后的数据
  tableList();
};

// 请求顶部筛选数据
const categoryList = async () => {
  try {
    const { data } = await getCategoryList({ type: 1 });
    data.forEach((group) => {
      if (Array.isArray(group.childs)) {
        group.childs.unshift({
          name: '不限',
          id: 'all',
        });
      }
    });
    filterOptions.value = data;
  } catch (error) {
    console.log('error:', error);
  }
};
// 请求表格列表数据
const tableList = async () => {
  const requestData = JSON.parse(JSON.stringify(tableConfig));
  // 删除不需要的字段
  delete requestData.columns;
  delete requestData.list;
  delete requestData.total;
  try {
    const { data } = await getMarketingList(requestData);
    tableConfig.total = data.total;
    tableConfig.list = data.data;
  } catch (error) {
    console.log('error:', error);
  }
};
// 分页处理
const sizeChange = (val) => {
  tableConfig.pageSize = val;
  tableList();
};
// 分页处理
const currentChange = (val) => {
  tableConfig.page = val;
  tableList();
};
// 下载
const downItem = async (row) => {
  try {
    const downUrl = row.type == 'original' ? row.img_url : row.download;
    await downloadImage(downUrl, row.name); // 等待下载完成
    await addDownloadNum({ type: '1', id: row.id }); // 下载完成后增加下载次数
  } catch (error) {
    console.log('error:', error);
  }
};
// 列表弹窗
const edit = async (row) => {
  console.log('拿到的row', row);

  // 每次打开 Dialog 时先重置 form
  dialogVisible.value = true;
  try {
    const { data } = await getMarketingInfo({ id: row.id });

    if (data.mg_id) {
      data.show_id = convertObjectToArray(data.show_id);
    }
    const deafultForm = {
      // 显示设置
      show_id: ['2', '3', '4'],
      // 联系人
      contacts: data.contacts,
      // 联系电话
      phone: data.phone,
      // 联系地址
      address: data.address,
      // 下载地址
      download: '',
      // 二维码链接地址
      qrcode_url: '',
      // 上传二维码地址
      qrcode: '',
      id: '',
      // 左侧背景图
      img_url: row.img_url,
      // 营销id
      mg_id: row.id,
      // 营销图名称
      mg_name: row.name,
      // 是否编辑新增
      isAdd: data ? false : true,
    };
    resetForm(data.mg_id ? data : deafultForm);
  } catch (error) {
    console.log('error:', error);
  }
};
// 定义一个函数用于重置 form 到初始状态
const resetForm = (row) => {
  Object.assign(form, row);
};
// 搜索
const seacrh = (val) => {
  tableConfig.search = val;
  tableList();
};
onMounted(() => {
  // 顶部筛选分类
  categoryList();
  // 底部表格
  tableList();
});
</script>

<style scoped lang="scss">
.filter-container {
  margin: 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
</style>
